<template>
  <el-row>
    <el-col :span="24">
      <ReceiptForm v-model="receipt"
                   :hiddenFields="hiddenFields" />
      <span>如需上传回单照片，请点击
        <el-button type="text"
                   @click="go">上传照片</el-button>
      </span>
    </el-col>
    <el-col :span="24">
      <div class="footer">
        <el-button type="default"
                   @click="handleCancel">取消</el-button>
        <el-button type="primary"
                   :loading="loading"
                   @click="handleSubmit">确定</el-button>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import axios from "axios";
import _ from 'lodash'
export default {
  name: "QuickReceipt",
  props: {
    value: Object,
  },
  data () {
    return {
      loading: false,
      hiddenFields: ["receiptDesc", "receiptSignTime", "syncUpAttachments"],
      receipt: {
        receiptDesc: "",
        receiptType: 0,
        receiptTime: this.$moment(new Date()).format("YYYY-MM-DD 23:59:00"),
        receiptSignTime: null
      },
      disabled: false,
    }
  },
  computed: {
    waybillId () {
      return this.value?.waybillId || this.value?.id
    },
    path () {
      return this.value?.waybillType === 10 ? 'wayBillDetail' : 'carrierWayBillDetail'
    }
  },
  methods: {
    go () {
      this.$router.push({
        name: this.path,
        query: {
          waybillId: this.waybillId
        }
      })
    },
    handleSubmit: _.debounce(function () {    // 触发事件
      this.loading = true;
      this.submit();
    }, 600),
    async submit () {
      const url = "/transport/waybill/receipt";
      const receipt = {
        ...this.receipt,
        waybillId: this.waybillId,
        receiptAt: this.receipt.receiptTime,
      }
      const { code } = await axios.post(url, receipt)
        .catch(err => {
          this.$message({ type: "error", message: err.message });
          this.loading = false;
        });
      if (code === 0) {
        this.loading = false;
        this.$message({ type: "success", message: "回单成功" });
        this.$emit("confirm", receipt);
      }
    },
    handleCancel () {
      this.$emit("cancel");
    }
  }
}
</script>